<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>天气</title>
		<style>
			* {
				box-sizing: border-box;
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			.cw {
				width: 30%;
				background: #daedff none repeat scroll 0 0;
				height: 120px;
				float: left;
				margin: 5px;
				display: block;
				font-size: 14px;
			}
			
			.container {
				width: 1140px;
				margin: auto;
			}
			
			.cw img,
			#list div,
			.cr {
				float: left;
			}
			
			#list div span,
			#list div h3 {
				display: block;
				padding: 10px;
				text-align: center;
			}
			
			#list div {
				display: block;
				background: #187db6;
				margin: 10px;
				text-align: center;
			}
			
			.cy {
				display: block;
				text-align: center;
			}
			
			#list:before,
			#list:after {
				display: block;
				clear: both;
				content: "";
			}
			
			.cw:before,
			.cw:after {
				display: block;
				clear: both;
				content: "";
			}
			
			.brf {
				color: #187db6;
				display: block;
			}
			
			.txt {
				color: #818181;
				display: block;
			}
			
			.ct {
				margin: 0 60px;
			}
		</style>
	</head>

	<body>
		<input type="text" id="ipt" placeholder="请输入要查询的城市天气">
		<div>城市：<span id="city"></span></div>
		<div>天气：<span id="now"></span></div>
		<div class="cy">最近七天的天气预报

			<div id="list">

			</div>
		</div>
		<div class="cw1">生活指数：</div>
		<div class="container">
			<div class="cw">空气指数:
				<div id="air">
					<img src="images/zhishu_07.png" alt="">
					<div class=""></div>
					<div class="ct">
						<span class="brf1 brf"></span> <span class="txt1 txt"></span></div>
				</div>
			</div>
			<div class="cw">洗车指数:
				<div id="cw">
					<img src="images/zhishu_21.png" alt="">
					<div class=""></div>
					<div class="ct">
						<span class="brf2 brf"></span> <span class="txt2 txt"></span></div>
				</div>
			</div>
			<div class="cw">穿衣指数:
				<div id="drsg">
					<img src="images/zhishu_11.png" alt="">
					<div class=""></div>
					<div class="ct">
						<span class="brf3 brf"></span> <span class="txt3 txt"></span></div>
				</div>
			</div>
			<div class="cw">紫外线指数:
				<div id="uv">
					<img src="images/zhishu_03.png" alt="">
					<div class=""></div>
					<div class="ct">
						<span class="brf4 brf"></span>
						<span class="txt4 txt"></span></div>
				</div>
			</div>
			<div class="cw">出行指数:
				<div id="trav">
					<img src="images/zhishu_13.png" alt="">
					<div class=""></div>
					<div class="ct">
						<span class="brf5 brf"></span>
						<span class="txt5 txt"></span></div>
				</div>
			</div>
			<div class="cw">运动指数:
				<div id="sport">
					<img src="images/zhishu_18.png" alt="">
					<div class=""></div>
					<div class="ct">
						<span class="brf6 brf"></span>
						<span class="txt6 txt"></span></div>
				</div>
			</div>
		</div>

		<script>
			var city = "邯郸";
			var ipt = document.querySelector("#ipt")

			function loadXMLDoc() {
				var xmlhttp;
				if(window.XMLHttpRequest) {
					//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					// IE6, IE5 浏览器执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var json = xmlhttp.responseText;
						json = JSON.parse(json);
						console.log(json);

						for(var l = 0; l < 7; l++) {
							var h3 = document.createElement("h3")
							h3.innerHTML = json.basic.city;
							var span = document.createElement("span")
							span.innerHTML = json.daily_forecast[l].date;
							var span1 = document.createElement("span")
							span1.innerHTML = json.daily_forecast[l].cond.txt_d;
							var span2 = document.createElement("span")
							span2.innerHTML = json.daily_forecast[l].wind.dir;
							var div = document.createElement("div");
							div.appendChild(h3)
							div.appendChild(span)
							div.appendChild(span1)
							div.appendChild(span2)
							document.querySelector("#list").appendChild(div)
							console.log(div)
							div = "城市;" + h3 + "日期:" + span + "天气" + span1 + "风向:" + span2
						}
						document.querySelector("#city").innerHTML = json.basic.city;
						document.querySelector("#now").innerHTML = json.now.cond.txt;
						document.querySelector(".brf1").innerHTML = json.suggestion.air.brf;
						document.querySelector(".brf2").innerHTML = json.suggestion.cw.brf;
						document.querySelector(".brf3").innerHTML = json.suggestion.drsg.brf;
						document.querySelector(".brf4").innerHTML = json.suggestion.uv.brf;
						document.querySelector(".brf5").innerHTML = json.suggestion.trav.brf;
						document.querySelector(".brf6").innerHTML = json.suggestion.sport.brf;
						document.querySelector(".txt1").innerHTML = json.suggestion.air.txt;
						document.querySelector(".txt2").innerHTML = json.suggestion.cw.txt;
						document.querySelector(".txt3").innerHTML = json.suggestion.drsg.txt;
						document.querySelector(".txt4").innerHTML = json.suggestion.uv.txt;
						document.querySelector(".txt5").innerHTML = json.suggestion.trav.txt;
						document.querySelector(".txt6").innerHTML = json.suggestion.sport.txt;

					}
				}

				xmlhttp.open("GET", "https://bird.ioliu.cn/weather?city=" + city, true);
				xmlhttp.send();
			}
			loadXMLDoc()
			document.querySelector("#ipt").addEventListener("change", function() {
				console.log(this.value);
				city = this.value;
				loadXMLDoc()
			})
		</script>
	</body>

</html>